<template>
  <s-popup v-model="showPopup" position="center" round :mask="true" mask-close>
    <view class="rename-popup">
      <view class="popup-title">{{ title }}</view>

      <view class="popup-content">
        <uni-easyinput
          v-model="inputValue"
          :placeholder="placeholder"
          clearable
          focus
        />
      </view>

      <view class="popup-actions">
        <s-button type="default" size="small" @click="cancel">取消</s-button>
        <s-button
          type="primary"
          size="small"
          @click="confirm"
          :loading="loading"
        >
          确认
        </s-button>
      </view>
    </view>
  </s-popup>
</template>

<script>
export default {
  props: {
    show: Boolean,
    title: String,
    value: String,
    placeholder: String,
    loading: Boolean,
  },
  data() {
    return {
      showPopup: this.show,
      inputValue: this.value,
    };
  },
  watch: {
    show(newVal) {
      this.showPopup = newVal; // 监听父组件show的变化
    },
    value(newVal) {
      this.inputValue = newVal;
    },
  },
  methods: {
    confirm() {
      if (!this.inputValue.trim()) {
        uni.showToast({
          title: "请输入内容",
          icon: "none",
        });
        return;
      }
      this.$emit("confirm", this.inputValue);
      this.$emit('update:show', false) 
    },
    cancel() {
      this.$emit("cancel");
      this.$emit('update:show', false) 
    },
  },
};
</script>

<style lang="scss">
.rename-popup {
  padding: 40rpx;
  background-color: #fff;
  border-radius: 24rpx;
  width: 600rpx;

  .popup-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
    color: #333;
  }

  .popup-content {
    margin-bottom: 40rpx;
  }

  .popup-actions {
    display: flex;
    justify-content: space-between;

    button {
      flex: 1;
      margin: 0 10rpx;
    }
  }
}
</style>